/** @jsxImportSource @emotion/react */
import {  css } from "@emotion/react";
import * as React from "react";
import {
  Toolbar,
  Navbar,
  useTheme,
  IconButton,
  Button,
  Tabs,
  Tab,
  Layer,
  TabPanel,
  MenuList,
  MenuItem,
  Tooltip,
  IconChevronDown,
  IconPlus,
  DarkMode,
  LightMode,TwoHalfFrame,
  Pager, IconArchive, ButtonRefComp, DarkRefMode
} from "customize-easy-ui-component";

//import { useSession,  useSignOut } from "../auth";
import { Link as RouterLink } from "../routing/Link";
//import { Link as RouterLink, useRoute, useLocation, Switch, Route } from "wouter";
import { useMedia } from "use-media";
import { Layout } from "./Layout";
//import { TaskList } from "./task/TaskList";
//import { DeviceList } from "./DeviceList";
//import { useCountOfTask } from "./db";
import {UserContext} from "../routing/UserContext";
import useLogoutMutation from "../common/useLogoutMutation";
import queryString from "query-string";
import { DevfilterContext } from "../context/DevfilterContext";
import {useCallback, useContext} from "react";
import RoutingContext from "../routing/RoutingContext";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import { PipeMainQuery } from "./__generated__/PipeMainQuery.graphql";
import { PipingUnitList } from "./PipingUnitList";
import {TaskList} from "../task/TaskList";
import {DeviceList} from "../device/DeviceList";
//找不到类型定义！ @types/babel-plugin-relay 没提供TS支持
//import {graphql} from 'relay-runtime';  //实际数据可以发起并获得到，可惜babel报错，纯粹不允许？
const graphql = require("babel-plugin-relay/macro");    //编译器解析graphql文本代码。


interface PipeMainProps {
    prepared: {
        myQuery: PreloadedQuery<PipeMainQuery>;
    }
    children: React.ReactNode;
    id?: string;
    routeData: any;
}


export default function PipeMain(props: PipeMainProps) {
  const theme = useTheme();
  //const {user} = useSession();
    const {user, setUser} =useContext(UserContext);
  const isLarge = useMedia({ minWidth: "768px" });
 // const qs = queryString.parse(window.location.search);
  const {filter:devfl, } =React.useContext(DevfilterContext);
 // const [, params] = useRoute("/device/:recipe*");
    const { isExact }=props.routeData;
    const {history } = useContext(RoutingContext);
  let showingRecipe =history.location.pathname; // params?.recipe;
  let initTab=0;

  const [activeTab, setActiveTab] = React.useState(initTab);

  const renderList = isLarge || isExact;  　//大屏或者小屏但是没有显示具体明细页的场合。
   //为何这一行执行好多边？幸亏子组件不会执行多边。
    console.log("PipeMain金准props",props,"history",history,"devfl:",devfl);
  const { call:signOut } = useLogoutMutation();
  //const { item:sumofTask,  } = useCountOfTask({dep:"", status:""} );
 // const { item:sumofTask,  } ={item: 3045};
    //必须把下面的挂接片段的参数集中放在这里引入的。参数按照出现顺序排列：参数在3个地方出现。
    //前端必选after参数为空的：也会送到后端再后端抛异常 Object required to be not null; 参数定义了却没用到也会编译报错！
    //【小心阻碍点】下层Fragment嵌入带来的参数也必须在这里定义啊，不能放在下层定义参数，需提前声明参数。一个graphQL请求包只能套一个query,不允许多个query{}存在的！约束啊。
   //这里不能和下层次共同定义一个同名字参数的，编译报错。最后办法：除非后端提供接口能够接受两个参数充当同一个实际参数功能，奇怪！。
   //Relay要求的提前汇聚加载数据的模式只能这样了；需提前定义参数名以及提早赋予参数数值。
  const data = usePreloadedQuery<PipeMainQuery>(
      graphql`
          query PipeMainQuery(
              $pipe:ID!, $after:String,$first:Int=10,
          ) {
              node(id: $pipe)
              {
                  id, __typename
                  ...PipingUnitListInner
              }
        }
      `,
      props.prepared.myQuery,
  );

  const { node:pipeline }=data;

    React.useEffect(() => {
        console.log("管道单元管理props.prepared变动=" ,props,"history", history);
    }, [signOut, props, history,isLarge,activeTab,user]);

  return (
      <TwoHalfFrame rightPanel={props.children}>
          <PipingUnitList eqps={pipeline!}/>
      </TwoHalfFrame>
  );
};

//路由动态加载的组件必须有default的
//export default DeviceMain;
